<%--
  Created by IntelliJ IDEA.
  User: 86158
  Date: 2022/10/25
  Time: 11:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HRM</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>

<div class="layui-card layui-content">
    <div class="layui-card-body">
        <form class="layui-form" action="" lay-filter="component-form-element">
            <input type="hidden" id="id" name="id" value="${loginUser.id}">
            <input type="hidden" id="avatar" name="avatar">
            <div class="layui-form-item" style="text-align: center">
                <div style="align-content: center">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1">选择头像</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" style="width: 100px;height: 100px;"
                                 id="demo1">
                            <p id="demoText"></p>
                        </div>
                    </div>
                </div>
            </div>
            <br>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="Add-filter">更改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            upload = layui.upload,
            element = layui.element;

        var uploadInst = upload.render({
            elem: '#test1',
            accept: 'images',
            acceptMime: 'image/*'
            , url: '${pageContext.request.contextPath}/user/uploadAvatar'
            , before: function (obj) {
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                console.log("res", res)
                if (res.code == "200") {
                    $('#demo1').attr('src', '${pageContext.request.contextPath}/images/avatars/' + res.data.fileName)
                    $('#avatar').val(res.data.fileName);
                    return layer.msg('上传成功', {icon: 1});
                } else {
                    return layer.msg('上传失败', {icon: 2});
                }
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        form.on('submit(Add-filter)', function (data) {
            var field = data.field;
            if (!field.avatar) {
                layer.msg("请先选择头像！",{icon:2})
                return false;
            }
            $.ajax({
                url: "${pageContext.request.contextPath}/user/updateAvatar?id=" + field.id + "&avatar=" + field.avatar,
                contentType: "application/json",
                success: function (data) {
                    if (data.code == "200"){
                        layer.msg("成功修改头像",{
                            icon:1,
                            success:function () {
                                var frameIndex = parent.layer.getFrameIndex("UpdateAvatar-frame");
                                parent.layer.close(frameIndex);
                                var rightAvatar = $("#rightAvatar", window.parent.document);
                                var leftAvatar = $("#leftAvatar", window.parent.document);
                                rightAvatar.attr('src','${pageContext.request.contextPath}/images/avatars/' + field.avatar)
                                leftAvatar.attr('src','${pageContext.request.contextPath}/images/avatars/' + field.avatar)
                            }
                        })
                    }else {
                        layer.msg("更改失败",{icon:2})
                    }
                },
                error: function (e) {
                    layer.msg(e.responseText, {icon: 2});
                }

            })
            return false;
        });

    });

</script>

</body>
</html>
